<template>
  <div class="page-wrapper">
    <!-- 顶部栏 -->
    <div class="top-bar">
      <div class="settings-icon" @click="showToast('设置功能开发中')">
        <!-- 你的设置图标 SVG 保持不变 -->
        <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="#666" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
          <path
            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
          </path>
        </svg>
      </div>
      <div class="top-title">在一起</div>
      <div class="settings-icon" @click="showCreatePage">
        <svg viewBox="0 0 24 24" width="21" height="21" fill="none" stroke="#666" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
      </div>
    </div>

    <!-- 卡片视图 -->
    <div class="card-container">
      <div class="card" v-for="(item, index) in cardList" :key="item.id">
        <div class="card-header">
          <h3 class="card-title">{{ item.title }}</h3>
        </div>

        <div class="card-image-container" @click="showDetailPage(item)">
          <img :src="item.image" :alt="item.title + '的图片'" class="card-image" />
          <div class="card-overlay">
            <div class="overlay-content">
              <span class="member-count">
                <i class="fas fa-users"></i> {{ item.members }}人在你离开后参与
              </span>
              <span class="update-time">{{ item.updateTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!hasMore" class="no-more-tip">没有更多了</div>

    <div class="toast" v-if="showToastMessage">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useTogetherStore } from '@/stores/together'   // ⭐ 新增

const router = useRouter()
const togetherStore = useTogetherStore()
const { cardList } = storeToRefs(togetherStore)        // ⭐ 从 store 读列表

/** 其它状态（保持原逻辑） */
const hasMore = ref(false)
const showToastMessage = ref(false)
const toastMessage = ref('')


/** 行为 */
const showToast = (message: string) => {
  toastMessage.value = message
  showToastMessage.value = true
  setTimeout(() => (showToastMessage.value = false), 3000)
}
const showCreatePage = () => {
  try {
    router.push('/together/create')
  } catch {
    showToast('创建功能开发中')
  }
}
const showDetailPage = (item: any) => {
  try {
    router.push(`/together/detail/1756645784074`)
  } catch {
    showToast(`查看活动：${item.title}`)
  }
}

/** ⭐ 首次挂载：从本地恢复，并只在“未初始化过”时注入两张初始卡（你的原始两条） */
onMounted(() => {
  togetherStore.hydrateFromLocal()
})
</script>

<style scoped>
/* 你的原样式全部保留 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: none;
  border-bottom: none;
}

.settings-icon {
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color .2s ease;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-icon:hover {
  background-color: #fff;
}

.top-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 21px;
  color: #223344;
  user-select: none;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.create-btn {
  background-color: #ff6b54;
  color: #fff;
  border: none;
  border-radius: 19px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  transition: all .2s ease;
  box-shadow: 0 2px 5px rgba(255, 107, 84, 0.3);
}

.create-btn:hover {
  background-color: #ff5c40;
  transform: translateY(-1px);
}

.create-btn:active {
  transform: translateY(0);
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding: 10px;
  max-width: 1200px;
  margin: 60px auto 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #FFFBF0;
}

.card {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  transition: all .3s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.spark-icon {
  color: #ff6b35;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 107, 53, .1);
}

.card-image-container {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  cursor: pointer;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.card:hover .card-image {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: #fff;
  padding: 16px;
  transform: translateY(0);
  transition: transform .3s ease;
}

.overlay-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.member-count {
  display: flex;
  align-items: center;
  gap: 5px;
}

.update-time {
  opacity: .9;
}

.no-more-tip {
  text-align: center;
  padding: 8px 0 16px;
  color: #999;
  font-size: 14px;
}

.plus-icon {
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background-color .2s ease;
}
.plus-icon:hover {
  background-color: #fff;
}

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, .7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 100;
  animation: fadeInOut 3s ease;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  85% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}

@media (max-width:768px) {
  .card-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 20px 15px;
    gap: 20px;
  }

  .top-title {
    font-size: 19px;
  }

  .card-image {
    height: 180px;
  }
}

@media (max-width:480px) {
  .card-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .card-image {
    height: 220px;
  }
}
</style>
